<template>
  <div style="margin-top: 20px">
    <el-card class="box-card21">
      <div class="clearfix">
        <span style="font-size: 1.5em; font-weight: bold; margin-left: 10px">{{ tableData[0].topic }}</span>
        <div style="float: right">
          <el-button type="danger" size="small" style="margin-left: 10px">导出</el-button>
          <el-button type="danger" size="small" style="margin-left: 10px">打印</el-button>
        </div>
      </div>
      <div class="status" style="float: right; margin-right: 20px; margin-top: 20px">
        <svg-icon icon-class="yiwan" style="width: 110px; height: 100px" />
      </div>
      <div style="margin-top: 40px">
        <div style="margin-left: 10px">申请人：{{ tableData[0].createdBy }}</div>
        <div style="margin-top: -20px; margin-left: 290px">
          申请时间：{{ tableData[0].creationTime }}
        </div>
      </div>
      <el-tabs style="margin-top: 50px">
        <el-tab-pane label="调拨信息">
          <el-card>
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <el-row :gutter="20" style="line-height: 3; margin-left: 90px; margin-right: -230px">
              <el-col :span="12">
                <div>处置单号：{{ tableData[0].code }}</div>
                <div>申请时间：{{ tableData[0].creationTime }}</div>
                <div>申请部门：{{ tableData[0].department }}</div>
                <div>处置日期：{{ tableData[0].date }}</div>
                <div>处置原因：{{ tableData[0].cause }}</div>
                <div>备注：{{ tableData[0].remark }}</div>
              </el-col>
              <el-col :span="12">
                <div>处置主题：{{ tableData[0].topic }}</div>
                <div>申请人：{{ tableData[0].applicant }}</div>
                <div>处置方式：{{ tableData[0].disposal }}</div>
              </el-col>
            </el-row>
          </el-card>
          <!--设备信息-->
          <el-card style="margin-top: 10px">
            <div slot="header" class="clearfix">
              <span>设备信息</span>
            </div>
            <div>
              <el-button style="margin-bottom: 10px;">导出</el-button>
              <el-table :data="tableData2" style="width: 100%" size="mini">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="序号" width="60" align="center">
                  <template v-slot="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="deviceNumber" label="设备编号" align="center" width="170"></el-table-column>
                <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
                <el-table-column prop="specification" label="规格型号" align="center"></el-table-column>
                <el-table-column prop="deviceType" label="设备类型" align="center"></el-table-column>
                <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
                <el-table-column prop="datePurchase" label="购置日期" width="120" align="center"></el-table-column>
                <el-table-column prop="purchasePrice" label="采购价格" align="center"></el-table-column>
                <el-table-column prop="useDepartments" label="使用部门" align="center"></el-table-column>
                <el-table-column prop="head" label="负责人" align="center"></el-table-column>
                <el-table-column prop="storageLocation" label="当前存放位置" width="120" align="center"></el-table-column>
                <el-table-column prop="disposalLocation" label="处置后存放位置" width="120" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" align="center"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="审核记录">
          <el-card>
            <div slot="header" class="clearfix">
              <span>审核记录</span>
            </div>
            <div>
              <el-button style="margin-bottom: 10px;">导出</el-button>
              <el-table :data="tableData4" style="width: 100%">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="index" label="序号" width="60" align="center"></el-table-column>
                <el-table-column prop="step" label="操作节点" align="center"></el-table-column>
                <el-table-column prop="operator" label="操作人" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" </el-table-column>
                  <el-table-column prop="time" label="操作时间" align="center"></el-table-column>
                  <el-table-column prop="content" label="审批内容" align="center"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="操作记录">
          <el-card>
            <div slot="header" class="clearfix">
              <span>操作记录</span>
            </div>
            <div>
              <el-button style="margin-bottom: 10px">导出</el-button>
              <el-table :data="tableData5" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="operator" label="操作人"></el-table-column>
                <el-table-column prop="time" label="操作时间"></el-table-column>
                <el-table-column prop="content" label="操作内容"></el-table-column>
              </el-table>
              <el-pagination background layout="prev, pager, next, sizes, total" :total="45" :page-size="10"
                style="margin-top: 20px; text-align: right">
              </el-pagination>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { SelectEquimentDisposalList } from "@/api/eastjet-maintenance/dao/dao";
export default {
  data() {
    return {
      form: {
        code: this.$route.query.code,
      },
      //设备详细
      tableData2: [

      ],
      //操作记录
      tableData5: [
        {
          index: 1,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 2,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 3,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 4,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
        {
          index: 5,
          operator: "admin",
          time: "2026-06-07 20:00:00",
          content: "",
        },
      ],
      //审核记录
      tableData4: [
        { index: 1, step: '提交节点', operator: '乾颐雅', action: '提交', time: '2022-07-12 10:04:39', content: '-' },
        { index: 2, step: '仓库管理员', operator: '谢文茜', action: '通过', time: '2022-07-12 12:20:12', content: '领用原因核实无误，符合要求，批准申请。' },
        { index: 3, step: '部门经理', operator: '萧文惠', action: '通过', time: '2022-07-13 10:04:39', content: '领用符合公司管理规定和流程，批准。' },
      ],
      tableData: [

      ],
    };
  },
  computed: {},
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      alert(this.form.code)
      SelectEquimentDisposalList(this.form).then(res => {
        this.tableData = res.data.data.list;
        this.tableData2 = res.data.data.dispositionDetails;
        console.log(res);
      });
    }
  },
};
</script>

<style scoped>
.box-card21 {
  width: 1254px;
  /* height: 4010px; */
  margin-left: 30px;
}

.summary {
  margin-top: 10px;
  text-align: right;
}
</style>
